<template>
	<view class="roster-search-container">
		<view class="search-container">
			<view class="search">
				<commonIcon class="search-icon" type="icon-a-sousuo1x" :size="24" />
				<input
					type="text"
					placeholder="搜索姓名/手机号/证件号"
					placeholder-class="placeholder-class"
					class="search-ipt"
					@input="handleInput"
					v-model="searchContent"
					focus
					auto-focus
				/>
				<commonIcon class="cancel-icon" @tap="clear" type="icon-qingchu" :size="40" v-if="searchContent.length != 0" />
			</view>
			<view class="cancel" @tap="cancel">取消</view>
		</view>
		<scroll-view
			class="scroll-view"
			scroll-y
			scroll-with-animation
			refresher-enabled
			:refresher-triggered="isPullRefresh"
			@refresherrefresh="refreshList"
			@scrolltolower="search"
			enable-flex
		>
			<view class="person-list" v-if="personList.length != 0">
				<view>
					<view class="person-item-container" @tap="toPersonDetail" :data-item="item" v-for="(item, index) in personList" :key="index">
						<view class="person-item">
							<view :class="'icon-container ' + (item.personType != '10' ? 'orange' : 'green')" v-if="!item.avatar && !loading">
								<commonIcon type="icon-a-laowurenyuan1x" :size="82" v-if="item.personType != '10'" />
								<commonIcon type="icon-a-guanlirenyuan1x" :size="82" v-else />
								<view class="black-icon" @tap.stop.prevent="showBlackReason" v-if="item.isBlack">
									<commonIcon type="icon-heimingdan" :size="32" />
								</view>
							</view>
							<view class="icon-container" v-else-if="item.avatar && !loading">
								<image :src="item.avatarData" mode="aspectFill" class="person-avatar" />
								<view class="black-icon" @tap.stop.prevent="showBlackReason" v-if="item.isBlack">
									<commonIcon type="icon-heimingdan" :size="32" />
								</view>
							</view>
							<view class="icon-container" v-else></view>
							<view class="person-item-middle">
								<view class="middle-top">
									<text class="person-name">{{ item.name }}</text>
									<text
										v-if="item.workingStatusData"
										:class="
											'working-status ' +
											(item.workingStatus == 1 ? 'on' : '') +
											' ' +
											(item.workingStatus == 2 ? 'off' : '') +
											' ' +
											(item.workingStatus == 3 ? 'wait' : '')
										"
									>
										{{ item.workingStatusData }}
									</text>
									<text class="work-type" v-if="item.workTypeName || item.personType">{{ item.workTypeNameData }}</text>
								</view>
								<view class="middle-bottom">{{ item.workTeamName }}</view>
							</view>
							<text class="right-arrow"></text>
						</view>
					</view>
				</view>
				<view class="no-more">没有更多数据</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import commonIcon from '@/pagesA/components/common/icon/icon';
import { workingStatusList } from '@/pagesA/config/enum';
import { common } from '@/pagesA/utils/common.js';
const app = getApp();
export default {
	components: {
		commonIcon
	},
	data() {
		return {
			workingStatusList,
			searchContent: '',
			pageSize: 20,
			pageNum: 1,
			personList: [],
			noMore: false,
			isPullRefresh: false,
			loading: true
		};
	},
	onLoad(options) {},
	onShow() {},
	methods: {
		handleInput() {
			common.commonMethods.debounce(() => {
				if (this.searchContent) {
					this.refreshList();
				} else {
					this.clear();
				}
			});
		},

		refreshList() {
			// this.setData({
			// 	pageNum: 1,
			// 	noMore: false,
			// 	isPullRefresh: false,
			// 	personList: []
			// });
			this.pageNum = 1;
			this.noMore = false;
			this.isPullRefresh = true;
			this.personList = [];
			this.search();
		},

		handleWorkTypeName(item) {
			if (item.personType) {
				if (item.personType == '10') {
					return '管理人员';
				} else if (item.personType == '30') {
					return '班组长';
				}
			}
			return item.workTypeName;
		},

		handlePostData(postData) {
			let obj = {};
			for (let key in postData) {
				if (postData[key]) {
					obj[key] = postData[key];
				}
			}
			return obj;
		},

		handleWorkingStatus(workingStatus) {
			for (let item of this.workingStatusList) {
				if (item.code == workingStatus) {
					return item.value;
				}
			}
			return;
		},

		search() {
			if (this.noMore) {
				return;
			}
			// this.setData({
			// 	loading: true
			// });
			this.loading = true;
			//查询组织机构下的人员列表
			let postData = {
				pageSize: this.pageSize,
				pageNum: this.pageNum,
				searchContent: this.searchContent
			};
			postData = this.handlePostData(postData);
			common.apis.roster.listPageRosterByOrgnation(postData).then(
				(res) => {
					if (!res.data) {
						return;
					}
					let personList = res.data.list;
					for (let item of personList) {
						item.workTypeNameData = this.handleWorkTypeName(item);
						item.workingStatusData = this.handleWorkingStatus(item.workingStatus);
						item.avatarData = common.commonMethods.imgShow(item.avatar);
					}
					// this.setData({
					// 	personList: this.personList.concat(personList),
					// 	pageNum: (this.pageNum += 1),
					// 	noMore: this.pageSize > personList.length,
					// 	isPullRefresh: false,
					// 	loading: false
					// });
					this.personList = this.personList.concat(personList);
					this.pageNum = this.pageNum += 1;
					this.noMore = this.pageSize > personList.length;
					this.isPullRefresh = false;
					this.loading = false;
				},
				() => {
					// this.setData({
					// 	isPullRefresh: false,
					// 	noMore: true,
					// 	loading: false
					// });
					this.noMore = true;
					this.isPullRefresh = false;
					this.loading = false;
				}
			);
		},
		clear() {
			// this.setData({
			// 	searchContent: '',
			// 	personList: []
			// });
			this.searchContent = '';
			this.personList = [];
		},
		cancel() {
			uni.navigateBack();
		},
		toPersonDetail(e) {
			const item = e.currentTarget.dataset.item;
			if (item.nationality.code != 'CHN') {
				common.message.toast('请在系统App查看');
				return;
			}
			uni.navigateTo({
				url: `/pagesA/pages/roster/detail/detail?uuid=${item.uuid}&projectUuid=${item.projectUuid}`
			});
		},
		showBlackReason() {
			console.log('占位：函数 showBlackReason 未声明');
		}
	}
};
</script>
<style>
.roster-search-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #f6f7fa;
}

.search-container {
	display: flex;
	align-items: center;
	background-color: #fff;
	padding: 16rpx 32rpx;
}

.search-container .search {
	display: flex;
	align-items: center;
	height: 64rpx;
	background: #eff1f6;
	border-radius: 6rpx;
	flex: 1;
	padding: 0 12rpx 0 24rpx;
}

.search .search-ipt {
	flex: 1;
	font-size: 26rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #4b5680;
	margin: 0 12rpx;
}

.search .cancel-icon {
	margin-left: auto;
}

.search-container .cancel {
	margin-left: 24rpx;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #949dbf;
}

.scroll-view {
	flex: 1;
	height: 0;
}

.person-list {
	margin-top: 16rpx;
}

.person-list .person-item-container {
	padding-left: 32rpx;
	background-color: #fff;
}

.person-item-container .person-item {
	display: flex;
	border-bottom: 1px solid #e1e2e7;
	padding-top: 32rpx;
	padding-right: 32rpx;
	padding-bottom: 32rpx;
}

.person-item-container:last-child .person-item {
	border-bottom: 0;
}

.person-item .person-item-middle {
	flex: 1;
	margin-left: 24rpx;
	overflow: hidden;
}

.person-item-middle .middle-top {
	display: flex;
	align-items: center;
	font-size: 34rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #1e253f;
}

.person-item .right-arrow {
	flex-shrink: 0;
	align-self: center;
	width: 15rpx;
	height: 15rpx;
	border-top: 4rpx solid #949dbe;
	border-right: 4rpx solid #949dbe;
	transform: rotate(45deg);
	border-radius: 4rpx;
	margin-left: 32rpx;
}

.icon-container {
	width: 82rpx;
	height: 82rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon-container.green {
	background-color: #00c467;
}

.icon-container.orange {
	background-color: #ff9544;
}

.person-item-middle .middle-top {
	display: flex;
	align-items: center;
}

.person-item-middle .person-name {
	word-break: break-all;
	text-align: justify;
}

.person-item-middle .work-type {
	flex-shrink: 0;
	flex-wrap: wrap;
	max-width: 400rpx;
	min-height: 40rpx;
	background: #eff1f6;
	border-radius: 6rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #4b5680;
	padding: 0 16rpx;
	margin-left: 16rpx;
	text-align: justify;
	word-break: break-all;
}

.person-item-middle .middle-bottom {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #949dbf;
	margin-top: 4rpx;
}

.person-item .icon-container {
	position: relative;
}

.icon-container .black-icon {
	position: absolute;
	top: -24rpx;
	right: -12rpx;
}

.icon-container .person-avatar {
	width: 82rpx;
	height: 82rpx;
	border-radius: 16rpx;
}

.no-more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8rpx;
	font-size: 26rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #949dbf;
}

.working-status {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80rpx;
	height: 40rpx;
	border-radius: 6rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	margin-left: 16rpx;
}

.working-status.on {
	background: rgba(18, 195, 97, 0.1);
	color: #12c361;
}

.working-status.off {
	background: rgba(255, 65, 85, 0.1);
	color: #ff4155;
}

.working-status.wait {
	background: rgba(255, 148, 61, 0.1);
	color: #ff943d;
}
</style>
